鋼琴留言版的前端程式碼

2026 iThome 鐵人賽

DAY 20

自我挑戰組

Laravel 讀碼源系列第 20 篇

18th鐵人賽

Tzu

2026-08-29 21:00:48

61 瀏覽

分享至

鋼琴留言版
https://laihao.vaserver.com/gbook

可以實際測試
也歡迎大家一起來學習喔
https://www.pressplay.cc/project/9D489B43D08BD198FDEB03ECDEFAC161/about

資料庫-這裡只有單一一個

MVC架構-
MODEL
前端
後端
前端-瀏覽總表

程式碼

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鋼琴課程許願板</title>
    <style>
        body { font-family: 'Microsoft JhengHei', sans-serif; background: #f9f3ff; }
        h1 { text-align: center; color: #6a0dad; margin-top: 30px; }
        .subtitle { text-align: center; color: #888; margin-bottom: 20px; }
        .btn { display: block; width: 150px; margin: 0 auto 20px;
               background: #6a0dad; color: white; text-align: center;
               padding: 10px; border-radius: 25px; text-decoration: none; }
        .btn:hover { background: #530a9e; }
        .success { text-align: center; color: green; }
        table { width: 90%; margin: 0 auto; border-collapse: collapse; background: white;
                border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        th { background: #6a0dad; color: white; padding: 12px; }
        td { padding: 12px; border-bottom: 1px solid #eee; text-align: center; }
        tr:hover { background: #f3e8ff; }
    </style>
</head>
<body>
    <h1>🎹 鋼琴課程許願板</h1>
    <p class="subtitle">歡迎許下你想學的鋼琴課程願望！</p>

    <a href="{{ route('gbook.create') }}" class="btn">✨ 新增許願</a>

    @if(session('success'))
        <p class="success">{{ session('success') }}</p>
    @endif

    <table>
        <tr>
            <th>編號</th>
            <th>許願人</th>
            <th>類型</th>
            <th>課程標題</th>
            <th>許願內容</th>
            <th>日期</th>
        </tr>
        @foreach($gbooks as $gbook)
        <tr>
            <td>{{ $gbook->gid }}</td>
            <td>{{ $gbook->gbook_poser }}</td>
            <td>{{ $gbook->gbook_kind }}</td>
            <td>{{ $gbook->gbook_title }}</td>
            <td>{{ $gbook->gbook_msg }}</td>
            <td>{{ $gbook->gbook_date }}</td>
        </tr>
        @endforeach
    </table>
</body>
</html>

這是一個 Laravel 的 Blade 列表頁面，用途是顯示「鋼琴課程許願板」的所有留言，並提供新增許願的按鈕。它結合了 HTML、CSS 和 Blade 語法。

檔案通常會放在：